<template>
  <div class="patrol-record-container">
    <div class="header">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span>巡更点一巡更记录</span>
    </div>
    
    <div class="content">
      <el-table :data="recordList" border stripe v-loading="loading">
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        
        <el-table-column prop="executorName" label="巡更人" width="100" align="center" />
        
        <el-table-column prop="pointName" label="巡更点" width="120" align="center" />
        
        <el-table-column prop="patrolTime" label="巡更时间" width="160" align="center" />
        
        <el-table-column prop="patrolResult" label="巡更结果" width="200" align="center">

        </el-table-column>
    
        
        <el-table-column label="巡更照片" width="180" align="center">
          <template slot-scope="scope">
            <div class="photo-list">
              <img 
                v-for="(photo, index) in scope.row.photos" 
                :key="index" 
                :src="photo"
                class="record-photo"
                @click="previewImage(scope.row.photos, index)"
              />
              <span v-if="!scope.row.photos || scope.row.photos.length === 0">无照片</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination">
        <el-pagination
          background
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="totalRecords">
        </el-pagination>
      </div>
    </div>
    
    <!-- 图片预览 -->
    <el-dialog :visible.sync="previewVisible" append-to-body class="image-preview-dialog">
      <img width="100%" :src="previewImageUrl" alt="预览图片">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recordList: [],
      currentPage: 1,
      pageSize: 8,
      totalRecords: 0,
      previewVisible: false,
      previewImageUrl: '',
      previewImages: [],
      loading: false,
      patrolPointId: null
    }
  },

  created() {
    // 从路由参数中获取巡更点ID
    this.patrolPointId = this.$route.query.patrolPointId;
    
    // 验证巡更点ID是否存在
    if (!this.patrolPointId) {
      this.$message.error('巡更点ID不存在，请返回列表重试');
      return;
    }
    
    this.fetchPatrolRecords();
  },

  methods: {
    // 获取巡更记录数据
    fetchPatrolRecords() {
      // 如果巡更点ID不存在，则不进行请求
      if (!this.patrolPointId) {
        this.$message.error('缺少巡更点ID参数');
        return;
      }
      
      this.loading = true; // 开始加载前显示加载状态
     
      // 调用后端API获取巡更记录
      this.$axios.get(`api/patrol-server/patrolPointRecord/queryByPatrolPointId/${this.patrolPointId}`)
        .then(response => {
          const { data } = response;
          if (data.code === 200 && data.data) {
            this.recordList = data.data || [];
            
            // 处理数据
            this.processRecordData();
          } else {
            this.$message.error('获取巡更记录失败');
          }
        })
        .catch(error => {
          console.error('获取巡更记录出错:', error);
          this.$message.error('获取巡更记录出错，请稍后重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 处理记录数据
    processRecordData() {
      this.recordList.forEach(record => {
        // 处理照片URL
        if (record.photoUrls) {
          record.photos = record.photoUrls.split(',').filter(url => url);
        } else {
          record.photos = [];
        }

        // 处理路线信息
        record.routeInfoList = [];
        
        // 如果有社区信息
        if (record.communityName) {
          record.routeInfoList.push({
            title: `1.${record.communityName}`,
            subtitle1: record.buildingName ? `2.${record.buildingName}` : '',
            subtitle2: record.unitName ? `3.${record.unitName}` : ''
          });
        }
        
        // 如果没有任何路线信息
        if (record.routeInfoList.length === 0) {
          record.routeInfoList.push({
            title: '暂无路线信息',
            subtitle1: '',
            subtitle2: ''
          });
        }
      });
    },

    // 处理页码变化
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchPatrolRecords();
    },

    // 预览图片
    previewImage(images, index) {
      this.previewImages = images;
      this.previewImageUrl = images[index];
      this.previewVisible = true;
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    }
  },
}
</script>

<style scoped>
.patrol-record-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}

.header i {
  margin-right: 5px;
  cursor: pointer;
}

.content {
  margin-bottom: 20px;
}

.route-info {
  text-align: left;
}

.route-item {
  margin-bottom: 5px;
  font-size: 12px;
}

.photo-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.record-photo {
  width: 50px;
  height: 50px;
  margin: 2px;
  object-fit: cover;
  cursor: pointer;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.image-preview-dialog .el-dialog__body {
  padding: 0;
  display: flex;
  justify-content: center;
}
</style>